import React, { useContext } from "react";
import "@/tailwind-variables.less";
import { Select } from "antd";
import { Theme, ThemeContext } from "./ThemeProvider";
import "./style.less";
export const ThemeSwitch: React.FC = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);
  const themes = [
    {
      label: "白色主题",
      value: "light",
    },
    {
      label: "黑色主题",
      value: "dark",
    },
  ];
  return (
    <div
      data-theme={theme}
      className={`flex items-center justify-center w-[300px] h-[300px] gap-2 bg-[var(--color-primary)]`}
      style={{
        border: "2px solid #029CFD",
      }}
    >
      <Select
        defaultValue={localStorage.getItem("theme") || "light"}
        options={themes}
        onChange={(value) => {
          toggleTheme(value as Theme);
        }}
      />
      <p className="text-[var(--color-secondary)]">主题切换</p>
      <div className="test">测试</div>
    </div>
  );
};
